<template>
  <el-form
    :inline="true"
    :model="formInline"
    class="demo-form-inline"
    style="width: 100%"
  >
    <el-form-item label="联系人">
      <el-input v-model="formInline.LinkMan" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="客户名称" style="width: 200px">
      <el-select v-model="formInline.ClientId" placeholder="请选择" clearable>
        <el-option
          v-for="item in CilentList"
          :key="item.ClientId"
          :label="item.ClientName"
          :value="item.ClientId"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="SaleListref">搜索</el-button>
      <el-button type="info" @click="OutShowInfo()">出库记录</el-button>
      <el-button type="info" @click="InstShowInfo()">生产记录</el-button>
    </el-form-item>
  </el-form>
  <el-table
    ref="multipleTableRef"
    :data="SaleList"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column
      property="SalesOrderNumber"
      label="销售单号"
    ></el-table-column>
    <el-table-column property="SalesDate" label="销售日期" />
    <el-table-column property="ClientName" label="客户名称" />
    <el-table-column property="LinkMan" label="联系人" />
    <el-table-column
      property="ContactInformation"
      label="联系方式"
    ></el-table-column>
    <el-table-column
      property="ContactNumber"
      label="联系电话"
    ></el-table-column>
    <el-table-column property="DestinationOfDelivery" label="收货地址" />
    <el-table-column label="操作">
      <template v-slot="slot">
        <el-button type="danger" @click="DeleteSale(slot.row.SaleId)"
          >删除</el-button
        >
        <el-button type="warning" @click="EditSale(slot.row.SaleId)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <br />
  <el-pagination
    v-model:current-page="PageIndex"
    v-model:page-size="PageSize"
    :page-sizes="[10, 20, 50, 100]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :total="totalCount"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage, ElTable } from "element-plus";
import axios from "axios";
import { reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
const Router = useRouter();
const SaleList = ref([]);

const CilentList = ref([]);
interface User {
  DestinationOfDelivery: string;
  SalesOrderNumber: string;
  SalesDate: string;
  ClientId: string;
  LinkMan: string;
  ContactInformation: string;
  ContactNumber: string;
}
const PageSize = ref(10);
const PageIndex = ref(1);
const totalCount = ref(0);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const formInline = reactive({
  LinkMan: "",
  ClientId: "",
});
const GetCilentList = () => {
  axios.get("Sale/GetClients").then((res) => {
    CilentList.value = res.data;
  });
};
const onSubmit = () => {
  console.log("submit!");
};
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const DeleteSale = (SaleId: string) => {
  axios.delete(`Sale/DeleteSale?SaleId=${SaleId}`).then((res) => {
    if (res.data.Code == 200) {
      ElMessage.success(res.data.Message);
      SaleListref();
    }
  });
};
const DeletesSale = () => {
  axios.put("Sale/DeletesSale", multipleSelection.value).then((res) => {
    if (res.data.Code == 200) {
      ElMessage.success(res.data.Message);
      SaleListref();
    }
  });
};
const SaleListref = () => {
  axios
    .get("Sale/GetSalesManagement", {
      params: {
        PageSize: PageSize.value,
        PageIndex: PageIndex.value,
        LinkMan: formInline.LinkMan,
        ClientId: formInline.ClientId || 0,
      },
    })
    .then((res) => {
      SaleList.value = res.data.Data;
      totalCount.value = res.data.TotalCount;
    });
};
const InstShowInfo = () => {
  Router.push(`/UserList/showbomInfo`);
};
const OutShowInfo = () => {
  Router.push(`/UserList/outshow`);
};
const EditSale = (SaleId: string) => {
  Router.push(`/UserList/saledetails?SaleId=${SaleId}`);
};
const handleSizeChange = (val: number) => {
  PageSize.value = val;
  SaleListref();
};
const handleCurrentChange = (val: number) => {
  PageIndex.value = val;
  SaleListref();
};

GetCilentList();
SaleListref();
</script>

